<!DOCTYPE html>

<!-- $Id: index.html 73 2012-03-12 13:08:27Z azbitnev@gmail.com $ -->

<html lang="ru">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/>
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.wysiwyg - example</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; font-size: 14px; }

#ex1, #ex2, #ex4, #ex5, .ex1, .ex2, .ex4, .ex5 {
	border-top-width: 0 !important;
}

.ajp-wysiwyg, .ajp-editable-codemode {
	background: #fff;
	border: 1px dashed #ccc;
	height: 300px;
	overflow: auto;
	padding: 6px;
	margin-bottom: 1em;
	position: relative;
	z-index: 1;
	margin: 0;
	outline: 0;
}

.resizable {
	width: 720px;
	height: 360px;
}

.ajp-resizable-active { outline: 0; }

.ajp-wysiwyg-toolbar-air {
	width: 30em;
}

</style>

<script>

$(document).ready(function () {

	$('#ex1').ajp$wysiwyg()

	$('#ex2').ajp$wysiwyg({ toolbar: 'mini'	})

	$('#ex3').ajp$wysiwyg({ toolbar: 'mini', air: true })

	$('#ex4').ajp$wysiwyg({
		toolbar: function ($e) {
			var tb = $('.tb-custom').clone()
			$('#ex4').before(tb)
			return tb
		}
	})

	$('#ex5').ajp$wysiwyg()
	$('.resizable').ajp$resizable({
		onchange: function (w, h, $el) {
			var $tb = $el.children('.ajp-wysiwyg-toolbar')
			var $ed = $el.children('.ajp-wysiwyg')
			var $cm = $el.children('.ajp-editable-codemode')
			$ed.width(w - ($ed.outerWidth() - $ed.width()))
			$ed.height(h - ($ed.outerHeight() - $ed.height()) - $tb.outerHeight())
			$cm.width(w - ($cm.outerWidth() - $cm.width()))
			$cm.height(h - ($cm.outerHeight() - $cm.height()) - $tb.outerHeight())
			$tb.width(w - ($tb.outerWidth() - $tb.width()))
		}
	})
})

</script>

</head>

<body>

<div class="container_12">
	<div class="grid_12">

	<h1>Basic usage</h1>

	<textarea id="ex1">
		<p>Lorem ipsum dolor sit amet, modus integre an vim, at vitae audiam has. Mea et posse tibique interpretaris. Summo audiam te quo. Dicta nemore quaeque duo cu, vis iisque tincidunt eu. An vel quis accusata ocurreret.</p>
		<p>Tollit expetenda pertinacia pro ea. Ea gubergren constituto est, ex nonumy omnesque suavitate his. Copiosae suavitate has ut, et porro fuisset cum. Noster scaevola quaestio ne ius. No vix verterem tincidunt suscipiantur, at denique appareat pri.</p>
		<p>This is editable area. You can use Ctrl+b, Ctrl+i, Ctrl+u, Ctrl+s, Ctrl+r, Ctrl+l, Ctrl+[1-6] shortcuts.</p>
	</textarea>

	<h1>Mini toolbar</h1>

	<textarea id="ex2">
		<p>Lorem ipsum dolor sit amet, modus integre an vim, at vitae audiam has. Mea et posse tibique interpretaris. Summo audiam te quo. Dicta nemore quaeque duo cu, vis iisque tincidunt eu. An vel quis accusata ocurreret.</p>
		<p>Tollit expetenda pertinacia pro ea. Ea gubergren constituto est, ex nonumy omnesque suavitate his. Copiosae suavitate has ut, et porro fuisset cum. Noster scaevola quaestio ne ius. No vix verterem tincidunt suscipiantur, at denique appareat pri.</p>
		<p>This is editable area. You can use Ctrl+b, Ctrl+i, Ctrl+u, Ctrl+s, Ctrl+r, Ctrl+l, Ctrl+[1-6] shortcuts.</p>
	</textarea>

	<h1>Air mode</h1>

	<textarea id="ex3">
		<p>Lorem ipsum dolor sit amet, modus integre an vim, at vitae audiam has. Mea et posse tibique interpretaris. Summo audiam te quo. Dicta nemore quaeque duo cu, vis iisque tincidunt eu. An vel quis accusata ocurreret.</p>
		<p>Tollit expetenda pertinacia pro ea. Ea gubergren constituto est, ex nonumy omnesque suavitate his. Copiosae suavitate has ut, et porro fuisset cum. Noster scaevola quaestio ne ius. No vix verterem tincidunt suscipiantur, at denique appareat pri.</p>
		<p>This is editable area. You can use Ctrl+b, Ctrl+i, Ctrl+u, Ctrl+s, Ctrl+r, Ctrl+l, Ctrl+[1-6] shortcuts.</p>
	</textarea>

	<h1>Resizable editor</h1>

	<div class="resizable">
		<textarea id="ex5">
			<p>Lorem ipsum dolor sit amet, modus integre an vim, at vitae audiam has. Mea et posse tibique interpretaris. Summo audiam te quo. Dicta nemore quaeque duo cu, vis iisque tincidunt eu. An vel quis accusata ocurreret.</p>
			<p>Tollit expetenda pertinacia pro ea. Ea gubergren constituto est, ex nonumy omnesque suavitate his. Copiosae suavitate has ut, et porro fuisset cum. Noster scaevola quaestio ne ius. No vix verterem tincidunt suscipiantur, at denique appareat pri.</p>
			<p>This is editable area. You can use Ctrl+b, Ctrl+i, Ctrl+u, Ctrl+s, Ctrl+r, Ctrl+l, Ctrl+[1-6] shortcuts.</p>
		</textarea>
	</div>

	<h1>Custom toolbar</h1>

	<textarea id="ex4">
		<p>Lorem ipsum dolor sit amet, modus integre an vim, at vitae audiam has. Mea et posse tibique interpretaris. Summo audiam te quo. Dicta nemore quaeque duo cu, vis iisque tincidunt eu. An vel quis accusata ocurreret.</p>
		<p>Tollit expetenda pertinacia pro ea. Ea gubergren constituto est, ex nonumy omnesque suavitate his. Copiosae suavitate has ut, et porro fuisset cum. Noster scaevola quaestio ne ius. No vix verterem tincidunt suscipiantur, at denique appareat pri.</p>
		<p>This is editable area. You can use Ctrl+b, Ctrl+i, Ctrl+u, Ctrl+s, Ctrl+r, Ctrl+l, Ctrl+[1-6] shortcuts.</p>
	</textarea>

	<!-- custom toolbar model -->

	<div class="ajp-wysiwyg-toolbar tb-custom">
		<div class="button" data-cmd="codemode"><span>&lt;/&gt;</span></div>
		<div class="separator"></div>
		<div class="button" data-cmd="bold"><span>B</span></div>
		<div class="button" data-cmd="italic"><span>I</span></div>
		<div class="button" data-cmd="underline"><span>U</span></div>
		<div class="separator"></div>
		<div class="button" data-cmd="image"><img src="picture.png"/></div>
		<div class="separator"></div>
		<div class="button" data-cmd="anchor"><img src="link.png"/></div>
		<div class="separator"></div>
		<div class="button" data-cmd="text"><img src="clear.png"/></div>
		<div class="clear"></div>
	</div>

	<!-- end of custom toolbar -->

	</div>
</div>

</body>

</html>

